<template>
	<view>
		<view class="bg c-img" :style="'background-image: url(' + WEBCONFIG?.sctt + ');'">
			<uv-navbar left-text="积分商城" bgColor="none" left-icon-color="#fff" @leftClick="$page.back()"
				placeholder></uv-navbar>
			<view class="mt-15 flex flex-x-space-between px-20">
				<view>
					<text class="text-white fw-600 fs-28">{{USERINFO?.integral}}</text>
					<text class="fs-16 text-white ml-4">积分</text>
				</view>
				<text class="px-16 py-6 flex flex-center fs-4 text-blue-1 bg-white rounded-30" @click="$page.open('/pages/order/index')">
					兑换记录</text>
			</view>


			<z-paging ref="paging" :top-z-index='1' @query="getList" use-page-scroll v-model="list">
				<view class=" mt-12 rounded-20  p-12 flex flex-wrap flex-x-space-between"
					style="background-color: #F6F7F8;">
					<view class="w-170 bg-white rounded-8 flex flex-column" v-for="(item,index) in list" :key="index">
						<image class="w-170 h-170 rounded-8" :src='item.image'></image>
						<view class="py-10 px-6 flex-1 box-sizing flex flex-column flex-x-space-between">
							<text class="fs-15 fw-600 text-ellipsis-2">{{item.name}}</text>
							<view class="flex flex-x-space-between mt-6 ">
								<text class="text-blue-1 fw-500 fs-15 fw-600">{{item.integral}}积分</text>
								<view class="p-6 rounded-4 border-blue-1 text-blue-1 fs-11"
									v-if="USERINFO?.integral>=item.integral" @click="open(item)">可兑换
								</view>
								<view class="p-6 rounded-4 border-grey-4 text-grey-4 fs-11" v-else>积分不足
								</view>
							</view>
						</view>
					</view>
				</view>
			</z-paging>
		</view>




		<uv-popup ref="popup" round='12' zIndex="none" bgColor="#F6F7F8">
			<view class="p-12 fs-16">
				<view class="text-center">
					<text>填写信息</text>
				</view>
				<view class="flex flex-y-center">
					<image :src="goods?.image" class="w-60 h-60 rounded-6"></image>
					<view class="ml-8 flex flex-column">
						<text class=" fw-600">{{goods?.name}}</text>
						<text class="fw-600  text-blue-1 pt-12">{{goods?.integral}}积分</text>
					</view>
				</view>
				<view class="px-15 mt-12 py-12 bg-white rounded-8 flex flex-x-space-between"
					@click="$page.open('/pages/address/index?status=true')">
					<text v-if="!address?.id">选择收货地址</text>
					<text v-else
						class="text-ellipsis-1">{{address?.name}}{{address?.mobile}}{{address?.province}}{{address?.city}}{{address?.area}}{{address?.detail}}</text>
					<uv-icon name="arrow-right" bold color="#000"></uv-icon>
				</view>
				<view class="px-15 mt-8 py-12 bg-white rounded-8 flex flex-x-space-between">
					<text>数量</text>
					<view class="flex flex-y-center">
						<uv-icon name="minus" color="#BBBBBB" @click="num--"></uv-icon>
						<text class="mx-8 px-14 py-3 rounded-2" style="background-color: #f4f4f4;">{{num}}</text>
						<uv-icon name="plus" color="#333" @click="num++"></uv-icon>
					</view>
				</view>
				<view class="flex-1 py-9 bg-blue-1 rounded-8 text-white mt-33 mb-10 text-center" @click="exchange()">
					立即兑换
				</view>
			</view>
		</uv-popup>
		<y-loading v-if="status"></y-loading>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { $http, $tool, $page } from '@/utils';
	import { useWebConfigStore, useRefs, useUserStore } from "@/stores/index";
	import { ref } from 'vue'
	import { onShow,onReachBottom ,onPageScroll } from '@dcloudio/uni-app'
	const { USERINFO } = useRefs(useUserStore());
	const { WEBCONFIG } = useRefs(useWebConfigStore()); 
	const list = ref([])
	const paging = ref()
	const popup = ref()
	const goods = ref()
	const num = ref(1)
	const address = ref()
	const status = ref(false)
	const queryForm = ref({
		page: 1,
		limit: 10
	})
	useZPaging(paging)

	onShow(() => {
		let pages = getCurrentPages();
		let currentPage = pages[pages.length - 1];
		if (currentPage.$vm.address_id) {
			getAddressId(currentPage.$vm.address_id)
		}
	})


	//根据ID获取地址
	const getAddressId = (id) => {
		$http.get('Address/getDetail', { id: id }).then(res => {
			address.value = res.data
		})
	}

	const getList = (page, limit) => {
		queryForm.value.page = page
		queryForm.value.limit = limit
		$http.get('Goods/getList', queryForm.value).then(res => {
			paging.value.complete(res.data)
		})
	}
	//兑换打开
	const open = (e) => {
		goods.value = e
		popup.value.open('bottom')
	}

	//兑换
	const exchange = (e) => {
		if (!address?.value?.id) {
			$tool.toast('请选择收货地址');
			return;
		}
		if (num.value < 1) {
			$tool.toast('最少兑换一个');
			return;
		}
		status.value = true
		$http.post('Goods/createOrder', { address_id: address.value.id, goods_id: goods.value.id, num: num.value })
			.then(res => {
				status.value = false
				$tool.toast('兑换成功');
				setTimeout(() => {
					$page.open('/pages/order/index')
				}, 500)
				popup.value.close()
			}).catch(() => {
				status.value = false
				popup.value.close()
			})
	}
</script>

<style>
	.bg {
		height: 338rpx;
	}
</style>